<template>
<div>
    <el-button type="primary" v-for="i in $store.state.user.menulist[this.$route.path]" :key="i.id" v-if="i.statusName=='启用'" @click="btn(i.code)">{{i.name}}</el-button>
    <el-row id="" style="padding: 10px 0;">
        <el-col :span="6">
            <el-input v-model="title" placeholder="标题"></el-input>
        </el-col>
        <el-col :span="6" :offset="1">
            <el-input v-model="author" placeholder="作者"></el-input>
        </el-col>
        <el-col :span="6" :offset="1">
            <el-date-picker v-model="detas" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyyMMddHHmmss">
            </el-date-picker>
        </el-col>
    </el-row>
    <div>
        <el-button type="primary" @click="getuserlist(1)">搜索</el-button>
        <el-button type="primary" @click="clears">重置</el-button>
    </div>
    <!--{{$store.state.user.menulist[this.$route.path]}}-->
    <div v-if="tableData" style="padding:20px 0">
        <el-table ref="singleTable" :data="tableData" style="width: 100%" height="300" @cell-click="celltable" :highlight-current-row="true">
            <el-table-column label="id" prop="id">
            </el-table-column>
            <el-table-column label="标题" prop="title">
            </el-table-column>
            <el-table-column label="作者" prop="author">
            </el-table-column>
            <el-table-column label="创建时间" prop="createTime">
            </el-table-column>
        </el-table>
    </div>
    <div v-if="total">
        <el-pagination background layout="prev, pager, next" :page-size="10" :total="total" @current-change="pagetype">
        </el-pagination>
    </div>
    <!--功能组件-->

    <edit :type="buttontype.update" :fun="showbtn" tname="update" :tablerow="tablerow"></edit>
     <deletes :type="buttontype.deleteArticle" :fun="showbtn" tname="deleteArticle" :tablerow="tablerow"></deletes>
</div>
</template>

<script>
import {
    http,
    articlelist
} from '../../api/api.js'
// import mgradd from './mgradd.vue'
import edit from './edit.vue'
import deletes from './delete.vue'
// import setrole from './setrole.vue'
export default {
    data() {
        return {
            tableData: '', //用户列表数据
            total: '', //总数量
            names: '', //搜索的名字
            buttontype: { //功能对话框状态
                update: false, //修改文章
                deleteArticle: false, //删除文章
            },
            tablerow: '', //当前选中的用户
            page: 1, //当前页码
            title: '', //标题名
            author: '', //作者名
            detas:'', //时间  202002150000
        }
    },
    mounted() {
        this.getuserlist(1)
    },
    components: {
        deletes,
        edit,
    },
    methods: {
        //点击选中的用户
        celltable(row) {
            this.tablerow = row
        },
        //对话框关闭回调
        showbtn(type) {
            this.buttontype[type] = false
            this.getuserlist(this.page)
            this.tablerow = ''
        },
        //统一管理按钮点击事件
        btn(a) {
            console.log(a)
            if (this.tablerow == '') {
                this.$message.error('请选择要操作的文章');
            } else {

                this.buttontype[a] = true
            }
        },
        //重置
        clears() {
            this.title = ''
            this.author = ''
            this.detas = ''
            this.getuserlist(1)
        },
        //页码发生改变时触发
        pagetype(page) {
            this.page = page
            this.getuserlist(page)
        },
        //获取用户列表
        getuserlist(page) {
            //开启动画
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                background: 'rgba(0, 0, 0, 0.7)'
			});
			
            this.$http.get(http + articlelist, {
                params: {
                    page,
                    limit: 10,
                    title: this.title,
                    author: this.author,
                    startDate: this.detas[0],
                    endDate: this.detas[1],
                }
            }).then((data) => {
                if (data.data.msg == '成功') {
                    this.tableData = data.data.data.records
                    this.total = data.data.data.total
                    console.log(this.total)
                } else {
                    this.$message.error(data.data.message);
                }
                //结束动画
                setTimeout(() => {
                    loading.close();
                }, 1000);
            }, (err) => {
                this.$message.error(err.data.message);
            })
        }
    }
}
</script>

<style>
.demo-table-expand {
    font-size: 0;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
</style>
